<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in" ref="applyHeight">
      <div class="cornerComment-in-title">
        <span>招生详情</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody" v-if="recruitDetail">
        <div class="task-body">
          <div class="task-box task-file">
            <p class="task-box-title">入学意向/入学审核</p>
            <div class="task-file-detail task-box-detail">
              <el-row>
                <el-col :span="24" v-if="recruitDetail.is_examine">
                  <div class="task-line-list">
                    <span class="task-detail-title">入学审核：</span>
                    <span v-if="recruitDetail.is_examine==1" class="examine_ok">通过</span>
                    <sapn v-else  class="examine_canle">{{ `驳回${recruitDetail.content?'('+recruitDetail.content+')':''}` }}</sapn>
                  </div>
                </el-col>
                <el-col :span="24">
                  <div class="task-line-list">
                    <span class="task-detail-title">入学意向：</span>
                    <span class="examine_see">{{ recruitDetail.status }}</span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="task-box task-info">
            <p class="task-box-title">招生详情</p>
            <div class="task-box-detail task-info-detail">
              <el-row>
                <el-col :span="12" v-if="recruitDetail.is_examine">
                  <div class="task-line-list">
                    <span class="task-detail-title">审核时间：</span>
                    <span>{{recruitDetail.examine_time}}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="task-line-list">
                    <span class="task-detail-title">招生标题：</span>
                    <span>{{ recruitDetail.recruit ? recruitDetail.recruit.title : '' }}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="task-line-list">
                    <span class="task-detail-title">报名时间：</span>
                    <span>{{ recruitDetail.create_time }}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="task-line-list">
                    <span class="task-detail-title">预约参观时间：</span>
                    <span>{{ recruitDetail.see_time?recruitDetail.see_time.split(' ')[0]:'' }}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="task-line-list">
                    <span class="task-detail-title">学生姓名：</span>
                    <span>{{ recruitDetail.name }}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="task-line-list">
                    <span class="task-detail-title">父母电话：</span>
                    <span>{{ recruitDetail.mobile_phone }}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="task-line-list">
                    <span class="task-detail-title">户籍地：</span>
                    <span>{{ recruitDetail.address }}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="task-line-list">
                    <span class="task-detail-title">预报班级：</span>
                    <span>{{ recruitDetail.class_name?recruitDetail.class_name:'--' }}</span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="task-box task-file">
            <p class="task-box-title">带看详情</p>
            <div class="task-file-detail task-box-detail">
              <el-row>
                <el-col :span="12">
                  <div class="task-line-list">
                    <span class="task-detail-title">带看老师：</span>
                    <span>{{ recruitDetail.user?recruitDetail.user.realname:'--' }}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="task-line-list">
                    <span class="task-detail-title">带看时间：</span>
                    <span>{{ recruitDetail.time}}</span>
                  </div>
                </el-col>
                <el-col :span="24">
                  <div class="task-line-list">
                    <span class="task-detail-title">带看备注：</span>
                    <span>{{ recruitDetail.remark ? recruitDetail.remark : '无' }}</span>
                  </div>
                </el-col>
                <el-col :span="24">
                  <div class="task-line-list">
                    <span class="task-detail-title">带看照：</span>
                    <div class="img-list-line">
                      <div class="img-list-line-box" v-for="(item,index) in imgList" :key="index"
                           :style="{background: 'url('+item+')',backgroundRepeat: 'no-repeat'}"
                           @click="showImg([item])">

                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click.native="closePOpup" size="small">返回</el-button>
        <el-button size="small" type="primary" v-if="statusType=='3'&& !recruitDetail.is_examine" plain @click="checkRecruitFn(1)">通过审核
        </el-button>
        <el-button size="small" type="danger" v-if="statusType=='3'&& !recruitDetail.is_examine" plain @click="checkRecruitFn(2)">驳回审核
        </el-button>
      </div>
    </div>
    <div style="position: fixed;top: -9999px">
      <viewer :images="studentPhoto" class="descimgBox">
        <img :src="studentPhoto[0]?studentPhoto[0]:''" class="viewerImg" ref="imgPrive">
      </viewer>
    </div>
  </div>
</template>

<script>
import {
  mapActions,
  mapGetters
} from 'vuex';
import {recuitLogDetail, recuitExamine} from '@/api/admin/recuit'

export default {
  props: ['visible', 'recruitId', 'statusType'], // tabValue 任务类型
  components: {},
  data() {
    return {
      dialogVisible: this.visible,
      recruitDetail: null,
      studentPhoto: [],
      imgList: []
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        this.InitFn()
      } else {
        this.studentPhoto = []
        this.imgList = []
        this.recruitDetail = null
      }
    }
  },
  created() {
  },
  methods: {
    showImg(option) {
      console.log('option:', option)
      let n = this
      this.$set(this.studentPhoto, 0, option[0])
      setTimeout(() => {
        n.$refs.imgPrive.click()
      }, 100)
    },
    // 详情数据
    InitFn() {
      recuitLogDetail({id: this.recruitId}).then(res => {
        console.log('res:', res)
        this.recruitDetail = res.vo
        let a = res.vo.pic.split(',')
        let b = []
        for (let item of a) {
          b.push(JSON.parse(JSON.stringify(item)))
        }
        this.imgList = b
      })
    },
    getFileSrc() {
      fileIndex({}).then(data => {
        let a = {}
        for (let item of data.list) {
          a[item.id] = item
        }
        this.getFileName(a, this.editForm.path_id, [])
      })
    },
    getFileName(data, id, name) {
      if (data[id]) {
        name.push(data[id].name)
        if (data[id].parent_id) {
          this.getFileName(data, data[id].parent_id, name)
        } else {
          let src = name.reverse();
          this.fileSrc = src.join('/')
        }
      }
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    taskChangeTakeFn(option) {
      this.uservisible = true
    },
    openCommonDialog(option) {
      this.teskCommon.commonType = option
      this.teskCommon.commonvisible = true
    },
    showNoteFn(id) {
      this.noteId = id
      this.noteReplyVisible = true
    },
    checkRecruitFn(option) {
      let that = this;
      if (option === 1) {
        this.$confirm('确认通过该用户审核, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.subimitExamin(option)
        });
      } else {
        this.$prompt('输入驳回说明', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({value}) => {
          // value
          that.subimitExamin(option, value)
        });
      }
    },
    subimitExamin(type, value) {
      let option = {id: this.recruitId, status: type}
      if (type === 2) {
        option.content = value;
      }
      console.log('提交结果：', option)
      recuitExamine(option).then(res => {
        console.log(res)
        if (!res.code) {
          this.InitFn()
          this.$emit('InitFn')
        }
      })
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
.contentTitle {
  flex: 1;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 60%;
  height: 80%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
  background: #eee;
}

.close-Btn-line {
  cursor: pointer;
}

.jobTime span {
  padding: 0 10px;
}

.task-box {
  background: #fff;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 20px;
}

.task-box-title {
  border-left: 3px solid #009bfb;
  padding-left: 10px;
  height: 15px;
  line-height: 15px;
}

.task-line-list {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.task-detail-title {
  display: block;
  width: 100px;
  text-align: right;
}

.task-box-detail {
  margin-top: 20px;
}

.file-link {
  color: #1b8de5;
  cursor: pointer;
}

.file-link:hover {
  text-decoration: underline;
}

.task-status {
  color: red;
}

.task_file_list {
  text-align: center;
  color: #999;
}

.img-list-line {
  display: flex;
  align-items: center;
}

.img-list-line-box {
  width: 80px;
  height: 80px;
  margin-right: 10px;
  cursor: pointer;
}
.examine_see{
  color: #fd6d00;
  font-weight: bold;
}
.examine_ok{
  color: rgb(89, 148, 0);
  font-size: 24px;
  font-weight: bold;
}
.examine_canle{
  color: rgb(255, 30, 0);
  font-size: 24px;
}
</style>
<!--style="color: rgb(255, 0, 0);font-size: 24px;"-->
